<template>
  <div class="afterSaleViewContainer">
    <div class="titleContainer">
      <div class="title">{{ $t("btnTitle.afterSale") }}</div>
    </div>
    <div class="saleCard" @click="pullDial">
      <div class="contentContainer">
        <div class="title">{{ $t("btnTitle.hotline") }}</div>
        <div class="subtitle">400-1919-999</div>
      </div>
      <div class="imgContainer">
        <img
          class="img"
          src="../../assets/img/light/ic_after_sale_on_light.png"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { toast } from "../../assets/js/device";
import { isIOS } from "../../assets/js/flexible.js";
export default {
  data() {
    return {
      phoneNumber: "400-1919-999",
      targetVersion: "13.0.5.310",
    };
  },
  methods: {
    // clickBtn() {
    //   this.$emit("clickBtn");
    // },
    //比较智慧生活版本
    compareAppVersion(curVersion, targetVersion) {
      console.log("cVersion = ", curVersion);
      console.log("targetVersion = ", targetVersion);

      //原来华为Demo的代码
      // let isLater = false;
      // if (cuVersion.includes(".") || cuVersion.includes("Beta")) {
      //   const target = targetVersion.split(".");
      //   const current = cuVersion.split(".");
      //   let length = current.length;
      //   if (current.includes("Beta")) {
      //     current.splice(current.indexOf("Beta"));
      //   }
      //   if (current.length >= target.length) {
      //     isLater = true;
      //     length = target.length;
      //   }
      //   for (let i = 0; i < length; i++) {
      //     if (Number(current[i]) !== Number(target[i])) {
      //       isLater = Number(current[i]) > Number(target[i]);
      //       break;
      //     }
      //   }
      // } else {
      //   let newVersion = String(targetVersion).replace(/\./g, "");
      //   isLater = Number(cuVersion) >= Number(newVersion);
      // }
      // return isLater;

      let current = String(curVersion).replace(/\./g, "").replace("Beta", "");
      let target = String(targetVersion).replace(/\./g, "").replace("Beta", "");
      return Number(current) >= Number(target);
    },

    //拨号
    pullDial() {
      let that = this;
      console.log("点击客服电话");
      const tel = this.phoneNumber; // 客服热线号码
      window.hilink &&
        window.hilink.getAppVersionCode("appVersionCodeCallback");
      window.appVersionCodeCallback = (res) => {
        let version = res;
        console.log("version = ", version);
        window.APPVersionCode = version;
        setTimeout(() => {
          if (this.compareAppVersion(version, this.targetVersion)) {
            window.location.href = `tel:400-191-9999`;
          } else {
            console.log("点击复制");
            let url = "4001919999";
            //新建一个文本框
            let oInput = document.createElement("input");
            //赋值给文本框
            oInput.value = url;
            document.body.appendChild(oInput);
            // 选择对象;
            oInput.select();
            // 执行浏览器复制命令
            document.execCommand("Copy");
            //复制完成删除掉输入框
            oInput.remove();
            console.log("复制成功");
            this.showToast(this.$i18n.t("toast.copySuccess"));
          }
        }, 300);
      };
    },
    showToast(msg) {
      if (isIOS()) {
        this.$toast(msg); //自定义的toast
        // toast(1000, msg);//华为提供的toast，iOS版会导致显示后不自动消失,一直显示在屏幕上
      } else {
        toast(1000, msg);
      }
    },
  },
};
</script>
<style scoped>
.afterSaleViewContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.afterSaleViewContainer .titleContainer {
  height: 48px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.afterSaleViewContainer .titleContainer .title {
  /* margin-left: 16px; */
  margin-left: 12px;
  margin-bottom: 8px;
  font-size: 16px;
  color: var(--current-primary-color);
}
.afterSaleViewContainer .saleCard {
  display: flex;
  height: 64px;
  border-radius: 16px;
  background-color: var(--current-card-background-color);
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.afterSaleViewContainer .saleCard .contentContainer {
  display: flex;
  height: 100%;
  flex: 2;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin-left: 16px;
}
.afterSaleViewContainer .saleCard .contentContainer .title {
  color: var(--current-primary-color);
  font-size: 16px;
}
.afterSaleViewContainer .saleCard .contentContainer .subtitle {
  color: var(--current-second-title-color);
  font-size: 12px;
  margin-top: 2px;
}
.afterSaleViewContainer .saleCard .imgContainer {
  display: flex;
  flex: 1;
  height: 100%;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.afterSaleViewContainer .saleCard .imgContainer .img {
  height: 24px;
  width: 24px;
  margin-right: 16px;
}
</style>
